import { useEffect, useState } from "react";
import "./index.scss";
import { getFrendList } from "@renderer/api";
import Frend from "../Frend";

type PropType = {
  onChage: any;
};
const SelectFrend: FC<PropType> = (props): JSX.Element => {
  const { onSubmit } = props;
  const [keyword, setKeyword] = useState("");
  const [activedId, setActiveId] = useState("");
  const [frendList, setfrendList] = useState([]);
  const [checkboxIds, setCheckboxIds] = useState([]);

  useEffect(() => {
    const result = getFrendList();
    setfrendList(result);
  }, []);
  const handleItemClick = (frendId) => {
    setActiveId(frendId);
  };
  const isActive = (frendId) => {
    if (frendId === activedId) {
      return "item--active";
    } else {
      return "";
    }
  };
  const handleChange = (event) => {
    setKeyword(event.target.value);
  };
  const onChange = (frendId: string) => {
    checkboxIds.push(frendId);
    onSubmit(checkboxIds);
  };
  return (
    <div className="frend-list">
      {frendList.length > 0 &&
        frendList.map((item) => {
          const { frendId, avatar, frendName } = item;
          return (
            <Frend key={frendId} frendId={frendId} avatar={avatar} frendName={frendName}></Frend>
          );
        })}
    </div>
  );
};

export default SelectFrend;
